<template>
  <div>
    <ux-grid ref="singleTable" :data="BData" style="width: 100%" border :header-cell-style="{
      color: 'rgba(0, 0, 0, 0.85)',
      fontSize: '14px',
      textAlign: 'center',
      fontWeight: 'bold',
      padding: 0,
      height: '80px',
    }" :row-style="{
      color: 'rgba(96,98,102,1)',
      fontSize: '13px',
      textAlign: 'left',
      padding: 0,
      height: '32px',
    }" :cell-style="cellStyle" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight"
      v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
      :element-loading-text="$t('message.bhView.loading')">
      <template slot="empty">  {{ BFlg ? '最新データ取込中' : 'No Data' }}  </template>

      <ux-table-column title="スプールNo." :resizable="false" width="200" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <span style="line-height: 80px;">スプールNo.</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.macNumb }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="C.L.番号" :resizable="false" width="160" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 80px;">C.L.番号</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.clNo }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="ラインクラス" :resizable="false" width="80" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;">ライン</span>
            <span style="display: inline-block;height: 14px;margin-top: 5px;">クラス</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.lcCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="材質分類" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 80px;">材質分類</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.mtrName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="流体名称" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;align-items: center;">
            <span style="line-height: 80px;">流体名称</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;">
            {{ scope.row.flowData }}
          </p>
        </template>
      </ux-table-column>

      <ux-table-column title="漏洩時の影響度" :resizable="false" width="120" align="center">
        <template slot="header">
          <div style="display: flex; flex-direction: column;">
            <span style="display: inline-block;height: 14px;">漏洩時の</span>
            <span style="display: inline-block;height: 14px;text-align: center;">影響度</span>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.ipCodName }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="定点が１か所以上あるか" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select1css" value="" size="mini" filterable clearable
              placeholder="定点が１か所以上あるか" @change="changeTableTitleSearch($event, 0)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st1Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="設置後12年以内に検査をしたか" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select2css" value="" size="mini" filterable clearable
              placeholder="設置後12年以内に検査をしたか" @change="changeTableTitleSearch($event, 1)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st2Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="材質変更後12年以内に検査をしたか" :resizable="false" width="190" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select3css" value="" size="mini" filterable clearable
              placeholder="材質変更後12年以内に検査をしたか" @change="changeTableTitleSearch($event, 2)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st3Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="拡大検査完了をしたか" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select4css" value="" size="mini" filterable clearable
              placeholder="拡大検査完了をしたか" @change="changeTableTitleSearch($event, 3)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st4Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="代表点の周期が12年以内か" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select5css" value="" size="mini" filterable clearable
              placeholder="代表点の周期が12年以内か" @change="changeTableTitleSearch($event, 4)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st5Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="代表点の余寿命が50年より大きいか" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select6css" value="" size="mini" filterable clearable
              placeholder="代表点の余寿命が50年より大きいか" @change="changeTableTitleSearch($event, 5)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st6Name }}
          </p>
        </template>
      </ux-table-column>
      <ux-table-column title="代表点が１か所以上あるか" :resizable="false" width="170" align="center">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select class="select7css" value="" size="mini" filterable clearable
              placeholder="代表点が１か所以上あるか" @change="changeTableTitleSearch($event, 6)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p style="white-space: pre;text-align: center;">
            {{ scope.row.st7Name }}
          </p>
        </template>
      </ux-table-column>

      <!-- <ux-table-column property="macNumb" title="111" :resizable="false">
        <template slot="header" slot-scope="scope">
          <div class="tabel-header-view">
            <el-select v-model="searchValue" size="mini" filterable clearable placeholder="代表点が１か所以上あるか"
              @change="changeTableTitleSearch($event, 1)">
              <el-option v-for="(item, index) in searchArr" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <p class="hideTextView" :title="scope.row.macNumb">
            {{ scope.row.macNumb }}
          </p>
        </template>
      </ux-table-column> -->

    </ux-grid>
    <!-- <div class="bottomView">{{ pageDes }}</div> -->
  </div>
</template>

<script>
// import $ from 'jquery'
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';

// 导出模块
export default {
  // 模块名字
  name: "MSDetailTabel",
  props: {
    tableHeight: Number,
    BData: Array,
    pageDes: String,
    LAB: Array,
    loading: Boolean,
    tabelDataConfig: Array,
    empty: String,
    Month: Object,
    currentDiff: Number,
    BFlg: Boolean,

  },
  // 模块数据
  data() {
    //数据
    return {
      searchValue: ['', '', '', '', '', '', ''],
      searchArr: ['全て', 'NO'],


      DateList: [],
      activeNum: 0,

      currentRow: {},
      nextRow: {},
      currentIndex: 0,
      nextIndex: 0,
      test: 0,
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    BData: {
      immediate: true,
      handler(nData) {

      },
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    refreshColumnFn() {
      this.$refs.singleTable.refreshColumn();
      this.searchValue = ['', '', '', '', '', '', ''];
    },

    // 触发表格筛选,只拿值，不进行双向绑定
    changeTableTitleSearch(e, i) {
      console.log(e, i);
      this.searchValue[i] = e;
      this.$emit('GetVariousSetListApi1', this.searchValue)
    },
    // 表格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let style = {
        color: "rgba(96,98,102,1)",
        fontSize: "14xpx",
        textAlign: "left",
        padding: 0,
        height: "32px"
      };
      if (column.title == 'スプールNo.' ||
        column.title == 'C.L.番号' ||
        column.title == 'ラインクラス' ||
        column.title == '材質分類' ||
        column.title == '流体名称' ||
        column.title == '漏洩時の影響度'
      ) {
        style.background = "#ffffe1";
        style.border = "0.5px solid rgb(233, 233, 233)";
      }
      return style;
    },

    handleCurrentChange(val) {
      console.log(val)
      //  true未更改
      // eventBus.$emit('getDialog1Current_EventBus');

      // /**
      //  * 未更改，则正常执行。=>记录当前的row和index
      //  * 已更改，记录需要的东西。=》记录下次的row和index，记录执行的Fn,通知弹框。
      //  * 此处通过index来选中，row可能存在_row表格自动添加的属性影响，导致选不中。
      //  */

      // if (this.$store.state.isCurrentNext) {
      //   this.$emit("getMSTabelRow", val);
      //   this.currentRow = _.cloneDeep(val);
      //   this.currentIndex = this.getIndex(this.currentRow);
      // } else {
      //   console.log('sdfsdfsdf', this.currentRow, this.currentIndex);

      //   this.nextRow = _.cloneDeep(val);
      //   // this.nextIndex = this.getIndex(this.nextRow);
      //   this.setCurrentFn(this.currentRow, this.currentIndex);

      //   let Fn = () => {
      //     this.currentRow = _.cloneDeep(val);
      //     this.currentIndex = this.getIndex(val);

      //     this.$emit('GetLineIndexListApi', this.nextRow.lineNo);
      //   }
      //   this.$store.commit("changeIsCurrentFn", Fn);
      //   eventBus.$emit('saveFnDialog1Current_EventBus');
      // }
    },

    getIndex(row) {
      var result = 0;
      this.BData.forEach((item, index) => {
        if (_.isEqual(item, row)) {
          result = index;
        }
      })
      return result
    },

    //  通过name设置当前行
    setCurrentFn(row, index) {
      this.$refs.singleTable.setCurrentRow(this.BData[index]);
      if (index >= 9) {
        this.$refs.singleTable.pagingScrollTopLeft((index - 2) * 33);
      }
    },

    load() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {

  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() {

  },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.right-text {
  width: 100%;
  height: 100%;
  text-align: right;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.dateMessage {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 224);
}

::v-deep .el-table .cell {
  line-height: 32px;
}

.sizeColor {
  color: rgb(22, 22, 255);
}

// ::v-deep .elx-table .elx-body--row.row--checked,
// ::v-deep .elx-table .elx-body--row.row--current,
// ::v-deep .elx-table .elx-body--row.row--radio {
//   background-color: #e6f7ff;
// }

::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
  border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
  box-shadow: none;
}

::v-deep .el-table__body tr.current-row>td {
  background-color: rgb(233, 236, 237);
}

.tiemFlgS {
  font-size: 20px;
  font-family: "Menlo, Monaco, Courier New, monospace";
  line-height: 24px !important;
  text-align: center;
  height: 24px;
}

.bottomView {
  // background-color: #e9e9e9;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
}

.table-input {
  ::v-deep .el-input__inner {
    background: #DCDCFA;
    border: 0 none;
    padding: 0;
    height: 32px;
    line-height: 32px;
  }
}

.tabel-header-view {
  // width: 100%;
  // height: 32px;
  // display: flex;
  // justify-content: flex-start;
  // align-items: center;
  background-color: #DCDCFA;


  ::v-deep .el-input__inner,
  ::v-deep .el-input {
    border: 0 none;
    width: 100%;
    height: 24px;
    background: transparent;
    padding-left: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input {
    width: 100%;
    display: flex;
    align-items: center;
  }

  ::v-deep .el-input--mini .el-input__inner {
    line-height: 24px;
  }

  ::v-deep input::-webkit-input-placeholder {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  ::v-deep .el-input__suffix {
    line-height: 24px;
  }

  ::v-deep .el-input--mini .el-input__icon {
    line-height: 24px;
  }

  ::v-deep .el-select__tags {
    max-width: 100%;
  }
}

::v-deep .elx-cell {
  // width: 100%;
  // height: 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // padding: 0;
}

::v-deep .elx-cell--title {
  width: 100%;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__inner::placeholder {
  white-space: pre-wrap;
  /* 支持换行符 */
  word-wrap: break-word;
  /* 自动换行 */
  // font-size: 12px;
  // /* 字体大小 */
  // color: #999;
  // /* 字体颜色 */
  // text-align: center;
}

::v-deep .tabel-header-view {
  padding-left: 15px;
}

::v-deep .el-input__icon {
  position: relative;
  top: 8px;
  color: rgb(52, 37, 37) !important;
}

::v-deep .tabel-header-view {
  height: 100%;
}

::v-deep .elx-cell--title {
  height: 80px;
  line-height: 61px;
}

.select1css {
  ::v-deep .el-input__inner {
    width: 125px !important;
    height: 80px !important;
  }
}

.select2css {
  ::v-deep .el-input__inner {
    width: 145px !important;
    height: 80px !important;
  }
}

.select3css {
  ::v-deep .el-input__inner {
    width: 175px !important;
    height: 80px !important;
  }
}

.select4css {
  ::v-deep .el-input__inner {
    width: 125px !important;
    height: 80px !important;
  }
}

.select5css {
  ::v-deep .el-input__inner {
    width: 130px !important;
    height: 80px !important;
  }
}

.select6css {
  ::v-deep .el-input__inner {
    width: 145px !important;
    height: 80px !important;
  }
}

.select7css {
  ::v-deep .el-input__inner {
    width: 130px !important;
    height: 80px !important;
  }
}

::v-deep .elx-cell {
  overflow: visible !important;
  padding: 0;
}
</style>
